<template>
    <div>
        <el-drawer
            title="权限设置"
            :visible.sync="drawerVisible"
            :size="800"
            :wrapper-closable="false"
            :with-header="false"
        >
            <div class="drawer-box">
                <div class="handle-btn">
                    <i class="el-icon-close" title="关闭" @click="drawerVisible=false" />
                </div>
                <div class="top-header">
                    <div class="title">
                        <div>
                            <span class="name">权限设置</span>
                        </div>
                        <div class="handle">
                            <el-button size="small" type="primary" plain @click="submit">保存</el-button>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <el-tree
                        ref="tree"
                        :data="data"
                        :show-checkbox="userType!='1'"
                        node-key="id"
                        :default-checked-keys="selectData"
                        :props="defaultProps"
                    />
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { rule, saveGroupRule } from '@/api/system'
export default {
    filters: {
        typeFilter(val) {
            const map = {
                1: '池到人',
                2: '池到池'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '启用',
                2: '禁用'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            drawerVisible: false,
            id: '',
            userType: '',
            data: [],
            selectData: [],
            defaultProps: {
                children: 'child',
                label: 'name'
            }
        }
    },
    methods: {
        showDrawer(row) {
            if (row.id) {
                this.id = row.id;
                this.userType = row.type
                this.loading = true;
                this.getData();
                this.drawerVisible = true;
            } else {
                this.$message.error('参数异常！');
            }
        },
        getData() {
            rule({group_id: this.id}).then(res => {
                this.data = res.data.rule_list;
                this.selectData = [];
                this.getSelected(res.data.rule_list);
            })
        },
        getSelected(data) {
            for (let i in data) {
                // console.log(data[i].name, data[i].has_auth);
                if (data[i].has_auth) {
                    this.selectData.push(data[i].id);
                }
                if (data[i].child && data[i].child.length) {
                    this.getSelected(data[i].child);
                }
            }
        },
        // 保存
        submit() {
            let arr = this.$refs.tree.getCheckedNodes();
            let ruleIds = [];
            arr.forEach(item => {
                ruleIds.push(item.id);
            })
            saveGroupRule({group_id: this.id, ruleIds: ruleIds.join(',')}).then(res => {
                if (res.data) {
                    this.getData();
                    this.$message({ type: 'success', message: '操作成功！'});
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
    background: transparent;
    overflow: hidden;
    position: relative;
    padding-left: 40px;
    padding-top: 70px;
    box-sizing: border-box;
}
::v-deep .el-drawer {
    background: transparent;
    box-shadow: none;
}
.drawer-box {
    height: 100%;
    background: rgb(242, 245, 251);
    border-radius: 4px 0 0 4px;
    display: flex;
    flex-direction: column;
    .handle-btn {
        width: 40px;
        // height: 120px;
        padding: 15px 0;
        background: #fff;
        position: absolute;
        top: 110px;
        left: 0;
        border-radius: 4px 0 0 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        i {
            height: 30px;
            line-height: 30px;
            &:hover {
                color: #409eff;
            }
        }
    }
}
.top-header {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 17px;
    color: #666;
    background: #fff;
    .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .name {
            font-weight: 600;
            color: #333;
            font-size: 16px;
            margin-right: 30px;
            line-height: 32px;
        }
        .member {
            margin-right: 20px;
            color: #999;
            span {
                color: #333;
            }
        }
    }
    .tags {
        margin-top: 10px;
        .item {
            margin-right: 10px;
        }
    }
    .step {
        margin-top: 10px;
        cursor: pointer;
    }
}
.content {
    flex: 1;
    padding: 20px;
    background: #fff;
    margin-top: 10px;
    overflow: auto;
    .card {
        background: #fff;
        padding: 5px 15px 10px;
        box-sizing: border-box;
    }
}
</style>